<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>魔塔小游戏</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #2c3e50, #1a1a2e);
            color: #fff;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
        }

        header {
            text-align: center;
            margin-bottom: 20px;
            padding: 20px;
            width: 100%;
        }

        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
            background: linear-gradient(to right, #ffd700, #ffa500);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .game-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
            max-width: 1200px;
            width: 100%;
        }

        .game-board {
            position: relative;
            background: #0d0d1a;
            border: 3px solid #4a4a8a;
            border-radius: 8px;
            box-shadow: 0 0 20px rgba(100, 100, 255, 0.3);
        }

        #gameCanvas {
            display: block;
        }

        .status-panel {
            background: rgba(30, 30, 60, 0.8);
            border: 2px solid #5d5d9e;
            border-radius: 10px;
            padding: 20px;
            width: 300px;
            backdrop-filter: blur(5px);
        }

        .player-stats {
            margin-bottom: 20px;
        }

        .stat-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            padding: 8px;
            background: rgba(50, 50, 100, 0.3);
            border-radius: 5px;
        }

        .stat-label {
            font-weight: bold;
            color: #ffa500;
        }

        .controls {
            margin-top: 20px;
        }

        .control-buttons {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            gap: 10px;
            margin-top: 10px;
        }

        .control-btn {
            background: linear-gradient(135deg, #6a5acd, #483d8b);
            border: none;
            color: white;
            padding: 12px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1.2rem;
            transition: all 0.2s;
        }

        .control-btn:hover {
            background: linear-gradient(135deg, #7a6add, #584d9b);
            transform: scale(1.05);
        }

        .control-btn:active {
            transform: scale(0.95);
        }

        .up-btn {
            grid-column: 2;
            grid-row: 1;
        }

        .left-btn {
            grid-column: 1;
            grid-row: 2;
        }

        .right-btn {
            grid-column: 3;
            grid-row: 2;
        }

        .down-btn {
            grid-column: 2;
            grid-row: 3;
        }

        .action-buttons {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }

        .action-btn {
            flex: 1;
            background: linear-gradient(135deg, #ff6b6b, #ffa502);
            border: none;
            color: white;
            padding: 12px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1rem;
            transition: all 0.3s;
        }

        .action-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

        .instructions {
            background: rgba(30, 30, 60, 0.8);
            border: 2px solid #5d5d9e;
            border-radius: 10px;
            padding: 20px;
            margin-top: 20px;
            max-width: 800px;
            width: 100%;
            backdrop-filter: blur(5px);
        }

        .instructions h2 {
            color: #ffa500;
            margin-bottom: 15px;
            text-align: center;
        }

        .instructions ul {
            padding-left: 20px;
        }

        .instructions li {
            margin-bottom: 10px;
            line-height: 1.5;
        }

        .key {
            display: inline-block;
            background: rgba(100, 100, 200, 0.3);
            padding: 2px 8px;
            border-radius: 4px;
            border: 1px solid #5d5d9e;
        }

        .message-box {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0, 0, 0, 0.9);
            border: 2px solid #ffd700;
            border-radius: 10px;
            padding: 20px;
            text-align: center;
            z-index: 100;
            display: none;
            min-width: 300px;
        }

        .message-box h3 {
            color: #ffd700;
            margin-bottom: 15px;
        }

        .message-box p {
            margin-bottom: 20px;
            line-height: 1.5;
        }

        .close-btn {
            background: linear-gradient(135deg, #4CAF50, #2E7D32);
            border: none;
            color: white;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
        }

        footer {
            margin-top: 30px;
            text-align: center;
            padding: 20px;
            font-size: 0.9rem;
            opacity: 0.7;
        }

        @media (max-width: 768px) {
            .game-container {
                flex-direction: column;
                align-items: center;
            }
            
            .status-panel {
                width: 100%;
                max-width: 500px;
            }
        }
    </style>
</head>
<body>
    <header>
        <h1>🏰 魔塔小游戏</h1>
        <p>经典RPG冒险游戏</p>
    </header>
    
    <div class="game-container">
        <div class="game-board">
            <canvas id="gameCanvas" width="500" height="500"></canvas>
        </div>
        
        <div class="status-panel">
            <div class="player-stats">
                <h2>角色状态</h2>
                <div class="stat-item">
                    <span class="stat-label">生命值:</span>
                    <span id="health">1000</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">攻击力:</span>
                    <span id="attack">100</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">防御力:</span>
                    <span id="defense">80</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">金币:</span>
                    <span id="gold">200</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">钥匙:</span>
                    <span id="keys">黄:2 蓝:1 红:0</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">楼层:</span>
                    <span id="floor">1F</span>
                </div>
            </div>
            
            <div class="controls">
                <h2>控制面板</h2>
                <div class="control-buttons">
                    <button class="control-btn up-btn">↑</button>
                    <button class="control-btn left-btn">←</button>
                    <button class="control-btn right-btn">→</button>
                    <button class="control-btn down-btn">↓</button>
                </div>
                
                <div class="action-buttons">
                    <button class="action-btn" id="saveBtn">保存游戏</button>
                    <button class="action-btn" id="loadBtn">读取游戏</button>
                </div>
            </div>
        </div>
    </div>
    
    <div class="instructions">
        <h2>游戏说明</h2>
        <ul>
            <li>使用 <span class="key">↑</span> <span class="key">←</span> <span class="key">↓</span> <span class="key">→</span> 方向键或屏幕上的按钮控制角色移动</li>
            <li><span style="color:#4CAF50">绿色方块</span> - 玩家角色</li>
            <li><span style="color:#2196F3">蓝色方块</span> - 墙壁（不可通过）</li>
            <li><span style="color:#FF9800">橙色方块</span> - 怪物（需要战斗）</li>
            <li><span style="color:#f44336">红色方块</span> - 钥匙（开门用）</li>
            <li><span style="color:#FFD700">黄色方块</span> - 金币（增加财富）</li>
            <li><span style="color:#9C27B0">紫色方块</span> - 楼梯（通往下一层）</li>
            <li>击败怪物可以获得经验和金币</li>
            <li>收集钥匙可以打开对应的门</li>
            <li>到达楼梯可以进入下一层</li>
        </ul>
    </div>
    
    <div class="message-box" id="messageBox">
        <h3 id="messageTitle">提示</h3>
        <p id="messageContent">这是一条消息</p>
        <button class="close-btn" id="closeMessage">确定</button>
    </div>
    
    <footer>
        <p>魔塔小游戏 | HTML5 Canvas 版本 | &copy; 2023</p>
    </footer>

    <script>
        // 游戏变量
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const CELL_SIZE = 25;
        const ROWS = canvas.height / CELL_SIZE;
        const COLS = canvas.width / CELL_SIZE;
        
        // 玩家状态
        let player = {
            x: 1,
            y: 1,
            health: 1000,
            maxHealth: 1000,
            attack: 100,
            defense: 80,
            gold: 200,
            yellowKeys: 2,
            blueKeys: 1,
            redKeys: 0,
            floor: 1
        };
        
        // 游戏地图 (1表示墙壁, 0表示空地)
        let map = [];
        
        // 初始化地图
        function initMap() {
            // 创建空地图
            map = Array(ROWS).fill().map(() => Array(COLS).fill(0));
            
            // 添加边界墙
            for (let i = 0; i < ROWS; i++) {
                map[i][0] = 1;
                map[i][COLS - 1] = 1;
            }
            for (let j = 0; j < COLS; j++) {
                map[0][j] = 1;
                map[ROWS - 1][j] = 1;
            }
            
            // 添加一些内部墙壁
            for (let i = 3; i < ROWS - 3; i += 2) {
                for (let j = 3; j < COLS - 3; j += 3) {
                    if (Math.random() > 0.7) {
                        map[i][j] = 1;
                    }
                }
            }
            
            // 添加一些怪物
            for (let i = 2; i < ROWS - 2; i++) {
                for (let j = 2; j < COLS - 2; j++) {
                    if (map[i][j] === 0 && Math.random() > 0.9) {
                        map[i][j] = 2; // 2表示怪物
                    }
                }
            }
            
            // 添加钥匙
            map[5][5] = 3; // 黄钥匙
            map[8][12] = 4; // 蓝钥匙
            map[15][7] = 5; // 红钥匙
            
            // 添加金币
            map[7][8] = 6;
            map[12][15] = 6;
            map[3][18] = 6;
            
            // 添加楼梯
            map[ROWS - 2][COLS - 2] = 7;
            
            // 确保玩家起始位置是空地
            map[player.y][player.x] = 0;
        }
        
        // 绘制游戏画面
        function drawGame() {
            // 清空画布
            ctx.fillStyle = '#0d0d1a';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            // 绘制地图
            for (let row = 0; row < ROWS; row++) {
                for (let col = 0; col < COLS; col++) {
                    const x = col * CELL_SIZE;
                    const y = row * CELL_SIZE;
                    
                    switch (map[row][col]) {
                        case 1: // 墙壁
                            ctx.fillStyle = '#2196F3';
                            ctx.fillRect(x, y, CELL_SIZE, CELL_SIZE);
                            break;
                        case 2: // 怪物
                            ctx.fillStyle = '#FF9800';
                            ctx.fillRect(x, y, CELL_SIZE, CELL_SIZE);
                            break;
                        case 3: // 黄钥匙
                            ctx.fillStyle = '#f44336';
                            ctx.fillRect(x, y, CELL_SIZE, CELL_SIZE);
                            break;
                        case 4: // 蓝钥匙
                            ctx.fillStyle = '#2196F3';
                            ctx.fillRect(x, y, CELL_SIZE, CELL_SIZE);
                            break;
                        case 5: // 红钥匙
                            ctx.fillStyle = '#f44336';
                            ctx.fillRect(x, y, CELL_SIZE, CELL_SIZE);
                            break;
                        case 6: // 金币
                            ctx.fillStyle = '#FFD700';
                            ctx.fillRect(x, y, CELL_SIZE, CELL_SIZE);
                            break;
                        case 7: // 楼梯
                            ctx.fillStyle = '#9C27B0';
                            ctx.fillRect(x, y, CELL_SIZE, CELL_SIZE);
                            break;
                        default: // 空地
                            ctx.fillStyle = '#1a1a2e';
                            ctx.fillRect(x, y, CELL_SIZE, CELL_SIZE);
                    }
                    
                    // 绘制网格线
                    ctx.strokeStyle = '#33334d';
                    ctx.lineWidth = 0.5;
                    ctx.strokeRect(x, y, CELL_SIZE, CELL_SIZE);
                }
            }
            
            // 绘制玩家
            ctx.fillStyle = '#4CAF50';
            ctx.fillRect(player.x * CELL_SIZE, player.y * CELL_SIZE, CELL_SIZE, CELL_SIZE);
            
            // 更新状态显示
            document.getElementById('health').textContent = player.health;
            document.getElementById('attack').textContent = player.attack;
            document.getElementById('defense').textContent = player.defense;
            document.getElementById('gold').textContent = player.gold;
            document.getElementById('keys').textContent = `黄:${player.yellowKeys} 蓝:${player.blueKeys} 红:${player.redKeys}`;
            document.getElementById('floor').textContent = `${player.floor}F`;
        }
        
        // 移动玩家
        function movePlayer(dx, dy) {
            const newX = player.x + dx;
            const newY = player.y + dy;
            
            // 检查边界
            if (newX < 0 || newX >= COLS || newY < 0 || newY >= ROWS) {
                return false;
            }
            
            // 检查是否是墙壁
            if (map[newY][newX] === 1) {
                showMessage("提示", "无法通过墙壁！");
                return false;
            }
            
            // 处理不同的地图元素
            switch (map[newY][newX]) {
                case 2: // 怪物
                    fightMonster(newX, newY);
                    return true;
                case 3: // 黄钥匙
                    player.yellowKeys++;
                    map[newY][newX] = 0;
                    showMessage("获得", "你获得了黄色钥匙！");
                    break;
                case 4: // 蓝钥匙
                    player.blueKeys++;
                    map[newY][newX] = 0;
                    showMessage("获得", "你获得了蓝色钥匙！");
                    break;
                case 5: // 红钥匙
                    player.redKeys++;
                    map[newY][newX] = 0;
                    showMessage("获得", "你获得了红色钥匙！");
                    break;
                case 6: // 金币
                    player.gold += 100;
                    map[newY][newX] = 0;
                    showMessage("获得", "你获得了100金币！");
                    break;
                case 7: // 楼梯
                    nextFloor();
                    return true;
            }
            
            // 移动玩家
            player.x = newX;
            player.y = newY;
            drawGame();
            return true;
        }
        
        // 战斗系统
        function fightMonster(x, y) {
            // 简化的战斗系统
            const monsterHealth = 200;
            const monsterAttack = 80;
            const monsterDefense = 30;
            const expGain = 50;
            const goldGain = 50;
            
            // 计算伤害
            const playerDamage = Math.max(1, player.attack - monsterDefense);
            const monsterDamage = Math.max(1, monsterAttack - player.defense);
            
            // 简化的战斗逻辑
            if (playerDamage > monsterHealth) {
                // 玩家胜利
                player.health -= monsterDamage;
                if (player.health <= 0) {
                    player.health = 0;
                    gameOver();
                    return;
                }
                
                player.gold += goldGain;
                map[y][x] = 0; // 移除怪物
                showMessage("战斗胜利", `你击败了怪物！获得了${goldGain}金币`);
                drawGame();
            } else {
                // 玩家失败或需要多次攻击
                player.health -= monsterDamage;
                if (player.health <= 0) {
                    player.health = 0;
                    gameOver();
                    return;
                }
                showMessage("战斗", `你对怪物造成了${playerDamage}点伤害，但怪物还活着！你受到了${monsterDamage}点伤害`);
            }
        }
        
        // 下一层
        function nextFloor() {
            player.floor++;
            player.x = 1;
            player.y = 1;
            initMap();
            showMessage("楼层", `欢迎来到${player.floor}F`);
            drawGame();
        }
        
        // 游戏结束
        function gameOver() {
            showMessage("游戏结束", "你的生命值归零了！游戏结束。");
        }
        
        // 显示消息
        function showMessage(title, content) {
            document.getElementById('messageTitle').textContent = title;
            document.getElementById('messageContent').textContent = content;
            document.getElementById('messageBox').style.display = 'block';
        }
        
        // 关闭消息框
        function closeMessage() {
            document.getElementById('messageBox').style.display = 'none';
        }
        
        // 保存游戏
        function saveGame() {
            const gameState = {
                player: player,
                map: map,
                timestamp: new Date().toISOString()
            };
            localStorage.setItem('towerGameSave', JSON.stringify(gameState));
            showMessage("保存成功", "游戏进度已保存！");
        }
        
        // 读取游戏
        function loadGame() {
            const saveData = localStorage.getItem('towerGameSave');
            if (saveData) {
                const gameState = JSON.parse(saveData);
                player = gameState.player;
                map = gameState.map;
                showMessage("读取成功", "游戏进度已读取！");
                drawGame();
            } else {
                showMessage("读取失败", "没有找到保存的游戏进度！");
            }
        }
        
        // 键盘控制
        function handleKeyPress(e) {
            switch(e.key) {
                case 'ArrowUp':
                    movePlayer(0, -1);
                    break;
                case 'ArrowDown':
                    movePlayer(0, 1);
                    break;
                case 'ArrowLeft':
                    movePlayer(-1, 0);
                    break;
                case 'ArrowRight':
                    movePlayer(1, 0);
                    break;
            }
        }
        
        // 事件监听器
        document.addEventListener('keydown', handleKeyPress);
        document.getElementById('closeMessage').addEventListener('click', closeMessage);
        document.getElementById('saveBtn').addEventListener('click', saveGame);
        document.getElementById('loadBtn').addEventListener('click', loadGame);
        
        // 控制按钮事件
        document.querySelector('.up-btn').addEventListener('click', () => movePlayer(0, -1));
        document.querySelector('.down-btn').addEventListener('click', () => movePlayer(0, 1));
        document.querySelector('.left-btn').addEventListener('click', () => movePlayer(-1, 0));
        document.querySelector('.right-btn').addEventListener('click', () => movePlayer(1, 0));
        
        // 初始化游戏
        initMap();
        drawGame();
    </script>
</body>
</html>
